<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title></title>
  <meta name="keywords" content="">
  <link rel="stylesheet" href="../plugin/styles/iview.css" />
  <link rel="stylesheet" href="../css/accountManage.css">
  <link rel="stylesheet" href="../css/common.css">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: url(../img/background.png) no-repeat;
      background-size: 100% 100%;
      position: absolute
    }

    .container {
      margin-top: 50px;
      /* height: 100%; */
      /* background: url(../img/background.png) no-repeat; */
      background-size: 100% 100%;
    }

    .ivu-form-item-error-tip {
      left: 36px;
    }

    .viewStyle div {
      margin-bottom: 4px;
      font-size: 14px
    }

    .ivu-notice {
      top: 100px !important;
    }
  </style>
</head>

<body>
  <div id="accountManage">
    <div class="container">
      <div class="content-head">
        <div>
          <img src="../img/contentHeadBg.png" class="content-head-bg">
        </div>
        <img src="../img/clickRoleManageOnOff.png" class="click-account" @click="goRoleManage()">
        <img src="../img/accountManageOn.png" class="click-account-management">
      </div>
      <div class="add-delete-btn">
        <i-form :model="checkin" inline>
          <form-item>
            <div class="add" @click="addCount()">
              <img src="../img/addAccount.png" style="width: 120px;">
            </div>
            <div class="delete" @click="deleteCount()">
              <img src="../img/deleteAccount.png" style="width: 120px;">
            </div>
          </form-item>
          <div style="float:right">
            <form-item>
              <i-input v-model="checkin.searchName" placeholder="查找用户名" style="width: 200px"></i-input>
            </form-item>
            <form-item>
              <div style="vertical-align: bottom;display: inline-block" @click="queryData()">
                <img src="../img/search-icon.png" width="52px"></img>
              </div>
            </form-item>
          </div>
        </i-form>
      </div>
      <div id="tableId" style="margin-top: 30px;padding: 10px">
        <i-table border ref="selection" @on-select="selectOne" @on-selection-change="selectionChange" :columns="columns"
          :data="data" highlight-row style="margin: 0 16px"></i-table>
        <Page :current="currentPage" :total="total" :page-size="pageSize" @on-change="changePage" show-elevator style="margin: 5px 16px 0"></Page>
      </div>
      <!-- 新增弹窗 -->
      <Modal v-model="addModal.display" title='创建账号' cancel-text=''>
        <i-form :model="addModal" ref="addModalForm" :rules="addModal.rules" :label-width="0">
          <form-item prop='name'>
            <i-input v-model="addModal.name" placeholder="用户名" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop='password'>
            <i-input type="password" v-model="addModal.password" placeholder="密码" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop="phone">
            <i-input v-model="addModal.phone" placeholder="手机号" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop="email">
            <i-input v-model="addModal.email" placeholder="邮箱" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop="roleCode" :label-width="0">
            <i-select v-cloak v-model="addModal.roleCode" placeholder="所属角色" class="creat-lean-input">
              <i-option v-for="item in getRoleList" :key="item.角色编码" :value="item.角色编码">{{item.角色名}}</i-option>
            </i-select>
          </form-item>
        </i-form>
        <div slot="footer">
          <button :loading="addLoading" @click="addOK">确认</button>
        </div>
      </Modal>
      <!-- 修改弹窗 -->
      <Modal v-model="editModal.display" :loading="editLoading" title='修改账号'>
        <i-form :model="editModal" ref="editModalForm" :rules="editModal.rules" :label-width="0">
          <form-item prop='name'>
            <i-input v-model="editModal.name" placeholder="用户名" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop='password'>
            <i-input type="password" v-model="editModal.password" placeholder="密码" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop='phone'>
            <i-input v-model="editModal.phone" placeholder="手机号" class="creat-lean-input"></i-input>
          </form-item>
          <form-item prop='email'>
            <i-input v-model="editModal.email" placeholder="邮箱" class="creat-lean-input"></i-input>
          </form-item>
          <form-item :label-width="0" prop="roleCode">
            <i-select v-cloak v-model="editModal.roleCode" placeholder="所属角色" class="creat-lean-input">
              <i-option v-for="item in getRoleList" :key="item.角色编码" :value="item.角色编码" >{{item.角色名}}</i-option>
            </i-select>
          </form-item>
        </i-form>
        <div slot="footer">
          <button :loading="editLoading" @click="editOK">确认</button>
        </div>
      </Modal>
      <!-- 查看弹窗 -->
      <Modal v-model="viewModal.display" ref="viewModal" title="查看账号" class="viewStyle"
        v-cloak>
        <div>
          <span>用户名称：</span>
          <span v-text='viewModal.username'></span>
        </div>
        <div>
          <span>角色名称：</span>
          <span v-text='viewModal.roleName'></span>
        </div>
        <div>
          <span>电话：</span>
          <span v-text='viewModal.phone'></span>
        </div>
        <div>
          <span>邮箱：</span>
          <span v-text='viewModal.email'></span>
        </div>
        <div>
          <span>是否是管理员：</span>
          <span v-text='viewModal.isSAdmin===1?"是":"否"'></span>
        </div>
        <div>
          <span>登录IP：</span>
          <span v-text='viewModal.ip'></span>
        </div>
        <div>
          <span>创建时间：</span>
          <span v-text='viewModal.createTime'></span>
        </div>
        <div>
          <span>最近一次登录时间：</span>
          <span v-text='viewModal.lastLoginTime'></span>
        </div>
        <div slot="footer">
          <button>确认</button>
        </div>
      </Modal>
      <!-- 删除的弹窗 -->
      <Modal v-model="deleteModal.display" title=""  class="delete-modal"
        v-cloak>
        <p>是否确定删除？</p>
        <div slot="footer">
          <button :loading="true" @click="delateModalOK">确认</button>
        </div>
      </Modal>
    </div>
  </div>
  <script src="../js/vue.min.js"></script>
  <script src="../plugin/iview.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  <script src="../js/displaySet/page.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../../../js/mock.js"></script>
  <script src="../../../js/api.js"></script>
  <script>
    new Vue({
      el: '#accountManage',
      mounted() {
        this.getUserList()
        this.getRoleId()
      },
      data() {
        const validateuser = {
          name: (rule, value, callback) => {
            if (!this.addModal.name) {
              return callback(new Error('用户名不能为空'))
            }
            callback()
          },
          password: (rule, value, callback) => {
            if (!this.addModal.password) {
              return callback(new Error('密码不能为空'))
            }
            callback()
          },
          phone: (rule, value, callback) => {
            if (!(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.addModal.phone)) || this.addModal.phone.length === 0) {
              return callback(new Error('电话号码格式有误'))
            }
            callback()
          },
          email: (rule, value, callback) => {
            if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.addModal.email)) || this.addModal.email
              .length === 0) {
              return callback(new Error('邮箱格式有误'))
            }
            callback()
          },
          roleCode: (rule, value, callback) => {
            if (!this.addModal.roleCode) {
              return callback(new Error('请选择角色'))
            }
            callback()
          }
        }
        const validateuserEdit = {
          name: (rule, value, callback) => {
            if (!this.editModal.name) {
              return callback(new Error('用户名不能为空'))
            }
            callback()
          },
          password: (rule, value, callback) => {
            if (!this.editModal.password) {
              return callback(new Error('密码不能为空'))
            }
            callback()
          },
          phone: (rule, value, callback) => {
            if (!(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.editModal.phone)) || !this.editModal.phone) {
              return callback(new Error('电话号码格式有误'))
            }
            callback()
          },
          email: (rule, value, callback) => {
            if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.editModal.email)) || !this.editModal
              .email) {
              return callback(new Error('邮箱格式有误'))
            }
            callback()
          },
          roleCode: (rule, value, callback) => {
            if (!this.editModal.roleCode) {
              return callback(new Error('请选择角色'))
            }
            callback()
          }
        }
        return {
          adminObj: {
            是否超级管理员: null
          },
          selectionIdsList: [],
          getRoleList: [],
          currentPage: 1,
          pageSize: 10,
          total: 0,
          addLoading: false,
          editLoading: false,
          columns: [{
              type: 'selection',
              width: 60,
              align: 'center'
            },
            {
              title: '用户名',
              key: 'username',
              align: 'center'
            },
            {
              title: '所属角色',
              key: 'roleName',
              align: 'center'
            },
            {
              title: '创建时间',
              key: 'createTime',
              align: 'center'
            },
            {
              title: '最近一次登录时间',
              key: 'lastLoginTime',
              align: 'center'
            },
            {
              title: '最近一次登录地点',
              key: 'ip',
              align: 'center'
            },
            {
              title: '操作',
              key: 'address',
              align: 'center',
              width: 200,
              render: (h, params) => {
                return h('div', [
                  h('span', {
                    style: {
                      marginRight: '15px',
                      color: '#fff',
                      cursor: 'pointer'
                    },
                    on: {
                      click: () => {
                        const editParmas = {
                          phone: params.row.phone,
                          username: params.row.username,
                          uuid: params.row.uuid,
                          email: params.row.email
                        }
                        this.editData(editParmas)
                      }
                    }
                  }, [
                    h('img', {
                      style: {
                        marginRight: '15px'
                      },
                      attrs: {
                        src: "../img/icon_edit.png",
                        style: 'width: 16px;height: 16px;'
                      }
                    }), '修改'
                  ]),
                  h('span', {
                    style: {
                      marginRight: '15px',
                      color: '#fff',
                      cursor: 'pointer'
                    },
                    on: {
                      click: () => {
                        const viewParmas = {
                          username: params.row.username,
                          roleName: params.row.roleName,
                          phone: params.row.phone,
                          lastLoginTime: params.row.lastLoginTime,
                          isSAdmin: params.row.isSAdmin,
                          ip: params.row.ip,
                          email: params.row.email,
                          createTime: params.row.createTime
                        }
                        this.showData(viewParmas)
                      }
                    }
                  }, [
                    h('img', {
                      style: {
                        marginRight: '15px'
                      },
                      attrs: {
                        src: "../img/icon_View.png",
                        style: 'width: 16px;height: 16px;'
                      }
                    }), '查看'
                  ])
                ]);
              }
            }
          ],
          data: [],
          addModal: {
            display: false,
            name: '',
            password: '',
            phone: '',
            email: '',
            roleCode: '',
            rules: {
              name: [{
                required: true,
                validator: validateuser.name,
                trigger: 'blur'
              }],
              password: [{
                required: true,
                validator: validateuser.password,
                trigger: 'blur'
              }],
              phone: [{
                required: true,
                validator: validateuser.phone,
                trigger: 'blur'
              }],
              email: [{
                required: true,
                validator: validateuser.email,
                trigger: 'blur'
              }],
              roleCode: [{
                required: true,
                validator: validateuser.roleCode,
                trigger: 'change'
              }]
            }
          },
          editModal: {
            display: false,
            password: '',
            roleCode: '',
            rules: {
              name: [{
                required: true,
                validator: validateuserEdit.name,
                trigger: 'blur'
              }],
              password: [{
                required: true,
                validator: validateuserEdit.password,
                trigger: 'blur'
              }],
              phone: [{
                required: true,
                validator: validateuserEdit.phone,
                trigger: 'blur'
              }],
              email: [{
                required: true,
                validator: validateuserEdit.email,
                trigger: 'blur'
              }],
              roleCode: [{
                required: true,
                validator: validateuserEdit.roleCode,
                trigger: 'change'
              }]
            }
          },
          viewModal: {
            display: false
          },
          // 删除弹窗声明
          deleteModal: {
            display: false,
          },
          checkin() {
            searchName: ''
          }
        }
      },
      methods: {
        // 获取角色Id
        getRoleId() {
          const params = {}
          axios.get(GET_roleList, params).then(resp => {
            if (resp.data.code === 200) {
              this.getRoleList = resp.data.data
            } else {
              this.$Notice.error({
                title: resp.data.msg
              })
            }
          })
        },
        // 获取用户列表
        getUserList() {
          const urlSearchParams = {
            params: {
              pageNum: this.currentPage,
              pageSize: this.pageSize,
              username: this.checkin.searchName
            }
          }
          // const urlSearchParams = {}
          axios.get(GET_getUserList, urlSearchParams).then(resp => {
            if (resp.data.code === 200) {
              this.dataListInfo = resp.data.data
              this.data = this.dataListInfo.dataList
              this.total = this.dataListInfo.totalRecord
            } else {
              this.$Notice.error({
                title: resp.data.msg
              })
            }
          })
        },
        //查询
        queryData() {
          this.getUserList()
        },
        //  改变页码
        changePage(page) {
          this.currentPage = page
          this.getUserList()
        },
        // 跳转到显示设置页面
        goDisplaySet() {
          window.location = 'displaySet.html'
        },
        // 跳转到角色管理
        goRoleManage() {
          var adminObj = JSON.parse(sessionStorage.loginData);
          if (adminObj.是否超级管理员 !== 0) {
            window.location = 'roleManage.html'
          } else {
            this.$Notice.error({
              title: '你没有权限'
            })
          }
        },
        addCount() {
          this.$refs.addModalForm.resetFields();
          this.addModal.display = true
        },
        addOK() {
          this.$refs.addModalForm.validate((valid) => {
            if (!valid) {
              return;
            } else {
              // 增加角色
              let urlSearchParams = new URLSearchParams();
              urlSearchParams.append('email', this.addModal.email);
              urlSearchParams.append('password', this.addModal.password);
              urlSearchParams.append('phone', this.addModal.phone);
              urlSearchParams.append('roleId', this.addModal.roleCode);
              urlSearchParams.append('username', this.addModal.name);
              axios.post(POST_addUser, urlSearchParams).then(resp => {
                if (resp.data.code === 200) {
                  this.$Notice.success({
                    title: '新增成功'
                  })
                  this.addLoading = false
                  this.addModal.display = false
                  this.getUserList()
                } else {
                  this.$Notice.error({
                    title: resp.data.msg
                  })
                }
              })
            }
          })
        },
        // 表格选择框
        selectOne(selection, row) {

        },
        selectionChange(list) {
          this.selectionIdsList = list.map((item) => {
            return item.uuid
          });
        },
        // 删除账号
        deleteCount() {
          this.deleteModal.display = true
        },
        delateModalOK() {
          let formData = new FormData()
          formData.append('uuid', this.selectionIdsList.toString())
          axios.post(POST_delUser, formData).then(resp => {

            if (resp.data.code === 200) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.getUserList()
            } else {
              this.$Notice.error({
                title: resp.data.msg
              })
            }
          })
          this.deleteModal.display = false
        },
        // 修改
        editData(editParmas = {}) {
          this.$refs.editModalForm.resetFields();
          this.editModal = Object.assign(this.editModal, {
            display: true,
            name: editParmas.username,
            email: editParmas.email,
            uuid: editParmas.uuid
          })
        },
        editOK(editParmas = {}) {
          this.$refs.editModalForm.validate((valid) => {
            if (!valid) {
              return;
            } else {
              // 修改账户
              let urlSearchParams = new URLSearchParams();
              urlSearchParams.append('email', this.editModal.email);
              urlSearchParams.append('password', this.editModal.password);
              urlSearchParams.append('phone', this.editModal.phone);
              urlSearchParams.append('roleId', this.editModal.roleCode);
              urlSearchParams.append('username', this.editModal.name);
              urlSearchParams.append('uuid', this.editModal.uuid);
              axios.post(POST_updateUser, urlSearchParams).then(resp => {
                if (resp.data.code === 200) {
                  this.$Notice.success({
                    title: '修改成功'
                  })
                  this.editLoading = false
                  this.editModal.display = false
                  this.getUserList()
                } else {
                  this.$Notice.error({
                    title: resp.data.msg
                  })
                }
              })
            }
          })         
        },
        // 查看按钮
        showData(viewParmas) {
          this.getUserList()
          this.viewModal = Object.assign(this.viewModal, {
            username: viewParmas.username,
            roleName: viewParmas.roleName,
            phone: viewParmas.phone,
            lastLoginTime: viewParmas.lastLoginTime,
            isSAdmin: viewParmas.isSAdmin,
            ip: viewParmas.ip,
            email: viewParmas.email,
            createTime: viewParmas.createTime,
            display: true
          })
        }
      }
    })
  </script>
</body>

</html>